<script setup>
// eslint-disable-next-line no-unused-vars
import { onMounted, onUnmounted, ref, watch } from 'vue'
import {
  showToast,
  showLoadingToast,
  closeToast,
  Popup,
  Icon,
  showConfirmDialog,
  showDialog,
} from 'vant'
import Toast from '@/components/toast/index'
import { useRouter, useRoute } from 'vue-router'
import { userStore } from '@/store/user'
import { refreshStore } from '@/store/refresh'
import { enumStore } from '@/store/enum'
import { storeToRefs } from 'pinia'
import commonModel from '@/http/modules/common.js'
import sixPwdModal from '@/components/pwd/sixPwdModal.vue'
import Utility from '@/utils/utility'
import { getRemaining } from '@/utils/time' // 勿删 有用到
const route = useRoute()
const router = useRouter()
const store = userStore()
const refresh = refreshStore()
const { userInfo } = storeToRefs(store)
const { disabled } = storeToRefs(refresh)
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)
const showCoinPopup = ref(false) // 是否展示币种选择框
const showCouponPopup = ref(false) // 是否展示优惠券选择框
let withdrawPrice = ref('') // 提现金额
let smsCode = ref('') // 短信验证码
let smsCountDown = ref(60) // 短信倒计时
let feeCountDown = ref(0) // 汇率倒计时
let requesting = ref(false) // 是否请求中
let withdrawpwdClear = ref(false)
let showWithdrawPwdModal = false //密码控件控制
let feeTimeout = null
let smsTimeout = null
let isSubmit = false
let applyId = '' // 提现申请后返回的数据id
let rateToken = '' //算费后返回的汇率Token，提现确认接口需要
let calculateCheckData = {} //预算费结果验证数据  提现确认接口需要
const BIZ_WITHDRAW = '10213' //提现业务码
const selectCoin = ref({}) // 选中的币种信息
const custInfo = ref({}) // 选中币种的银行卡信息
const exchangeInfo = ref({}) // 转化汇率信息
const couponList = ref([]) // 获取的优惠券列表
const couponInfo = ref({}) // 选中的优惠券信息
const couponIndex = ref('') // 选中的优惠券下标
const disableCoupinList = ref([]) // 无法使用的优惠券列表
const rateTips = ref('') //汇率固定提醒

// 监听提现金额  重新获取费率
// watch(withdrawPrice, () => {
//   if (withdrawPrice.value) {
//     withdrawPrice.value = +withdrawPrice.value
//       .toString()
//       .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
//     if (withdrawPrice.value > selectCoin.value.balanceAmount) {
//       withdrawPrice.value = selectCoin.value.balanceAmount
//     }
//     handleCalc()
//   }
// })

function handleBlur() {
  if (withdrawPrice.value) {
    withdrawPrice.value = +withdrawPrice.value
      .toString()
      .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
    if (withdrawPrice.value > selectCoin.value.balanceAmount) {
      withdrawPrice.value = selectCoin.value.balanceAmount
    }
    handleCalc()
  }
}
// 开始费率倒计时
function hanldeFeeCountDown() {
  if (feeCountDown.value > 1) {
    feeCountDown.value--
    clearTimeout(feeTimeout)
    feeTimeout = setTimeout(() => {
      hanldeFeeCountDown()
    }, 1000)
  } else {
    // 获取获取费率
    handleCalc()
  }
}
// 开启短信倒计时
function hanldeSmsCountDown() {
  if (smsCountDown.value > 1) {
    smsCountDown.value--
    clearTimeout(smsTimeout)
    smsTimeout = setTimeout(() => {
      hanldeSmsCountDown()
    }, 1000)
  } else {
    smsCountDown.value = 60
  }
}
// 获取币种信息
function getCoinInfo(coin) {
  commonModel
    .gatewayApi({
      bizContent: {
        token: sessionStorage.token,
        currencyId: coin,
      },
      service: 'cb_withdraw_init_query',
      version: '1.0.0',
    })
    .then((res) => {
      custInfo.value = res.cust
      selectCoin.value = res.custBalDetail
    })
}
// 计算费率
function handleCalc(useCoupon = false) {
  requesting.value = true
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    loadingType: 'spinner',
  })

  commonModel
    .gatewayApi({
      service: 'cb_supplier_calculate_fee',
      bizContent: {
        bizProductCode: BIZ_WITHDRAW, //提现业务码   常量提到单独配置页面 后续做  TODO
        bankCardId: custInfo.value.bankCardId,
        foreignAmount: withdrawPrice.value || 0, //提现金额
        couponSn: couponInfo.value.couponSn, //选择的优惠券
        foreignCurrency: selectCoin.value.currencyId, //选择的币种
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        if (result.bizSuccess) {
          feeCountDown.value = result.lockChargeRate.validSeconds
          exchangeInfo.value = result

          //汇率token
          rateToken = result.lockChargeRate.rateToken
          //预算费结果验证数据
          calculateCheckData = {
            serviceChargeAmount: result.serviceChargeAmount, //续费金额(人民币)
            origServiceChargeAmount: result.origServiceChargeAmount, //未优惠手续费金额(人民币)	是
            serviceChargeDiscountAmount: result.serviceChargeDiscountAmount, //优惠的手续费金额(人民币)	是
            realReceiptAmount: result.realReceiptAmount, //到账金额(人民币)	是
            realForeignAmount: result.realForeignAmount, //真实支付外币金额
          }

          if (!result.discountCalculateResult) {
            //优惠券计算是否成功
            couponInfo.value = {}
            couponIndex.value = ''
          }
          hanldeFeeCountDown()
          if (!useCoupon) {
            // 未选择优惠券需要刷新优惠券
            getCoupon()
          }
          requesting.value = false
          closeToast()
        }
      } else {
        exchangeInfo.value = {}
        getCalcFeeSuccess.value = false
        console.log('算费处理失败')
      }
    })
}
// 去KYC 变更银行卡
function toBank() {
  window.location.href = `${
    import.meta.env.VITE_KYC_BANK
  }?returnUrl=${encodeURIComponent(window.location.href)}&token=${sessionStorage.token}`
}

// 切换币种
function handleSelect(item) {
  getCoinInfo(item.currencyId)
  withdrawPrice.value = ''
  exchangeInfo.value = {}
  //可以重新输入金额
  clearTimeout(smsTimeout)
  smsCountDown.value = 60
  //优惠券信息清空
  couponIndex.value = ''
  couponInfo.value = {}
  showCoinPopup.value = false
}

// 显示优惠券列表
function hanldeShowCoupon() {
  // console.log(smsCountDown.value, `this is sss`)
  if (couponList.value.length && smsCountDown.value === 60) {
    showCouponPopup.value = true
    disabled.value = true
  }
}

function handleClose() {
  disabled.value = false
}

function doResult(result) {
  const commonToast = {
    showCancel: false,
  }
  if (result.status === 'P' || result.status === 'S') {
    Toast.open({
      ...commonToast,
      confirmFun: () => {
        router.push('/')
        Toast.close()
      },
      closeFun: () => {
        router.push('/')
        Toast.close()
      },
      title: '提现申请成功',
      content: '提现申请成功，我们将短信通知您结果',
    })
  } else {
    Toast.open({
      ...commonToast,
      confirmFun: () => {
        applyId = ''
        isSubmit = true
        Toast.close()
        handleCalc()
      },
      closeFun: () => {
        applyId = ''
        isSubmit = true
        Toast.close()
        handleCalc()
      },
      type: 'fail',
      title: '提现申请失败',
      content: `原因：${result.message}`,
    })
  }
}
function doProcess(result) {
  showConfirmDialog({
    confirmButtonText: '重试',
    cancelButtonText: '忘记密码',
    message: result.message,
    // showCancelButton: false,
  })
    .then(() => {
      showWithdrawPwdModal = true
    })
    .catch(() => {
      const token = sessionStorage.token
      window.location.href = `${
        import.meta.env.VITE_KYC_URL
      }/cross/chooseVerify?token=${token}&returl=${escape(
        window.location.href
      )}&returnUrl=${escape(window.location.href)}`
    })
}

// 选择优惠券
function handleSelectCoupon(item, index) {
  if (couponIndex.value === index) {
    couponIndex.value = ''
    couponInfo.value = {}
    handleCalc()
  } else {
    couponIndex.value = index
    couponInfo.value = item
    showCouponPopup.value = false
    handleCalc(true)
  }
}

// 获取优惠券
function getCoupon() {
  commonModel
    .gatewayApi({
      service: 'cb_coupon_list_query',
      bizContent: {
        currency: selectCoin.value.currencyId,
        amount: withdrawPrice.value,
        origFeeAmount: exchangeInfo.value.origServiceChargeAmount,
        pageNo: 1,
        channelCode: 30100, //提现场景编码30100
        pageSize: 100,
      },
      version: '1.0.0',
    })
    .then((res) => {
      if (res && res.length > 0) {
        let useableList = [],
          unuseableList = [];
        res.map((item) => {
          if (item.usable === 'false') {
            unuseableList.push(item)
          } else {
            useableList.push(item)
          }
        })
        // console.log("unuseableList===",unuseableList);
        couponList.value = useableList //可使用卡券列表
        disableCoupinList.value = unuseableList //未到使用时间的券列表
      }
    })
}
function couponSelectProcess() {
  // 有优惠券未选择优惠券
  if (couponList.value.length && !couponInfo.value.couponSn) {
    showConfirmDialog({
      confirmButtonText: '使用',
      cancelButtonText: '不使用',
      message: '您未选择优惠券，请确认是否需要使用优惠券',
    })
      .then(() => {
        showCouponPopup.value = true
      })
      .catch(() => {
        hanldeApply()
      })
  } else {
    hanldeApply()
  }
}
// 提现申请
function hanldeApply() {
  commonModel
    .gatewayApi({
      bizContent: {
        token: sessionStorage.token,
        bizProductCode: BIZ_WITHDRAW,
        bankCardId: custInfo.value.bankCardId,
        foreignAmount: withdrawPrice.value || 0,
        foreignCurrency: selectCoin.value.currencyId,
        outTradeNo: `${new Date().getTime()}${parseInt(
          Math.random() * 1000000
        )}`,
        couponSn: couponInfo.value.couponSn,
        source: sessionStorage.source || '',
      },
      service: 'cb_supplier_pay_apply', //提现和付款申请接口
      version: '1.0.0',
    })
    .then((res) => {
      applyId = res.applyToken
      hanldeSmsCountDown()
    })
}
// 提现确认
function hanldeConfirm() {
  //申请applyToken为空重新去申请
  if (!applyId) {
    if (isSubmit) {
      showToast('请重新获取验证码！')
      return
    } else {
      showToast('请先获取验证码！')
      return
    }
  }
  if (feeCountDown.value <= 5) {
    showToast(
      '汇率即将超时，请等待汇率自动刷新，确认新汇率后再重新获取验证码，发起立即提现；'
    )
    return null
  }
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    loadingType: 'spinner',
  })
  //校验申请验证码
  commonModel
    .gatewayApi({
      service: 'cb_message_verify',
      bizContent: {
        token: applyId,
        verifyCode: smsCode.value,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        //唤起密码控件
        showWithdrawPwdModal = true
      }
    })
}
function refreshAccountInfo() {
  commonModel
    .gatewayApi({
      bizContent: {
        token: sessionStorage.token,
      },
      service: 'cb_account_list_query',
      version: '1.0.0',
    })
    .then((res) => {
      if (res) {
        userInfo.value = res
      }
    })
}

function onwithPwdFinish() {
  withdrawpwdClear.value = true
  showWithdrawPwdModal = false
  let pwdObj = window.PassGlobalSix.withdrawPassguard || {}
  if (pwdObj.getLength() === 0) {
    showToast('请输入交易密码')
    return
  }

  //提现确认
  commonModel
    .gatewayApi({
      service: 'cb_supplier_pay_confirm',
      bizContent: {
        token: sessionStorage.token,
        applyToken: applyId, //	支付申请Token
        rateToken: rateToken, //汇率token
        // verifyCode: smsCode.value,
        password: pwdObj.getOutputSM(),
        randomKey: sessionStorage.randKey,
        calculateCheckData: calculateCheckData, //预算费结果验证数据
      },
      version: '1.0.0',
    })
    .then((res) => {
      closeToast()
      withdrawpwdClear.value = false //唤起pwd组建watch钩子
      if (res) {
        const { status } = res
        if (status === 'P' || status === 'F' || status === 'S') {
          //明确结果到结果页
          doResult(res)
        } else {
          //留在当前页面重新输入
          doProcess(res)
        }
        //刷新一下store账户信息
        refreshAccountInfo()

      } else {
        showToast(res.message)
      }
    })
    .catch(() => {
      showWithdrawPwdModal = false
      withdrawpwdClear.value = false //唤起pwd组建watch钩子
      showConfirmDialog({
        title: '提现申请失败',
        confirmButtonText: '确定',
        message: `提现处理失败，请重新发起`,
        showCancelButton: false,
      }).then(() => {
        applyId = ''
        handleCalc()
        isSubmit = true
      })
      closeToast()
    })
}

function showTips() {
  showToast('以最新优惠规则为准')
}
function getRateNotice() {
  commonModel
    .gatewayApi({
      service: 'cb_get_exchange_rate_notice',
      bizContent: {},
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        rateTips.value = result.rateTips
        if (result.notice) {
          showDialog({
            width: '3.4rem',
            title: '温馨提示',
            message: result.notice,
            confirmButtonText: '我已知悉',
          })
        }
      }
    })
}
onMounted(() => {
  getRateNotice()
  getCoinInfo(route.query.coin)
})
onUnmounted(() => {
  clearTimeout(feeTimeout)
  clearTimeout(smsTimeout)
})
</script>

<template>
  <div class="withdraw-price">
    <p class="fz-14">提现金额</p>
    <div class="input-box">
      <input
        v-model="withdrawPrice"
        type="number"
        maxlength="15"
        @blur="handleBlur"
        placeholder="0.00"
        :disabled="smsCountDown !== 60"
      />
      <div
        class="fz-16"
        @click="
          showCoinPopup = true;
          disabled = true
        "
      >
        {{ selectCoin.currencyId }}
        <i class="iconfont icon-youtiaozhuanicon"></i>
      </div>
    </div>
    <div class="balance fz-14">
      <span
        >余额 {{ $filters.formatMoney(selectCoin.balanceAmount) }}
        {{ selectCoin.currencyId }}</span
      >
      <p
        v-if="smsCountDown === 60"
        @click="
          withdrawPrice = selectCoin.balanceAmount;
          handleBlur()
        "
      >
        全部提现
      </p>
    </div>
  </div>
  <div class="bank-box fz-14">
    <p>提现银行卡</p>
    <span
      >{{ custInfo.bankName }}({{
        $filters.formatBank(custInfo.bindCard)
      }})</span
    >
    <div @click="toBank">变更银行卡</div>
  </div>

  <div class="fee">
    <div class="fee-box fz-14">
      <span>提现手续费合计</span>
      <p>
        {{ exchangeInfo.origServiceChargeAmount }}
        {{ exchangeInfo.realReceiptCurrency }}
      </p>
    </div>
    <div v-if="withdrawPrice" class="fee-tips">
      <div class="commission-tips">
        手续费（费率
        <span v-if="exchangeInfo.chargeInfo">{{
          $filters.formatNumber(
            exchangeInfo.chargeInfo.withdrawDiscountRate * 100
          )
        }}</span
        >%）
      </div>
      <i class="iconfont icon-gantanhaoicon" @click="showTips"></i>
    </div>
  </div>
  <!-- -${exchangeInfo.discountFeeAmount}${exchangeInfo.feeCurrencyId}-->
  <div v-if="withdrawPrice" class="bank-box fz-14" @click="hanldeShowCoupon">
    <p>提现优惠券</p>
    <span :style="{ color: !couponList.length ? '#999' : '#F41D1D' }">{{
      !couponList.length
        ? '暂无可用优惠券'
        : couponInfo.couponSn  
        ? `-${exchangeInfo.serviceChargeDiscountAmount}${exchangeInfo.serviceChargeCurrency}`
        : `有${couponList.length}张可用`
    }}</span>
    <i class="iconfont icon-youtiaozhuanicon"></i>
  </div>

  <div v-if="withdrawPrice && couponInfo.couponSn" class="bank-box fz-14">
    <p>优惠后手续费</p>
    <!-- exchangeInfo.resultRate    exchangeInfo.lockChargeRate.exchangeRate 
        exchangeInfo.feeCurrencyId      exchangeInfo. realReceiptCurrency
       feeAmount  serviceChargeAmount
    -->
    <span
      >{{ exchangeInfo.serviceChargeAmount }}
      {{ exchangeInfo.realReceiptCurrency }}</span
    >
  </div>

  <div v-if="withdrawPrice" class="fee-rate fz-14">
    <div class="fee-rate-title">
      <p>
        当前汇率牌价: 1{{ selectCoin.currencyId }} =
        {{
          exchangeInfo && exchangeInfo.lockChargeRate
            ? exchangeInfo.lockChargeRate.exchangeRate
            : ''
        }}{{ exchangeInfo.realReceiptCurrency }}
      </p>
      <span @click="handleCalc()">刷新</span>
    </div>
    <p class="fee-rate-row">
      <!-- exchangeInfo.rateUpdateTime  exchangeInfo.lockChargeRate.processTime  -->
      汇率更新时间:
      {{
        exchangeInfo && exchangeInfo.lockChargeRate
          ? exchangeInfo.lockChargeRate.processTime
          : ''
      }}
    </p>
    <p class="fee-rate-row">
      汇率有效倒计时: <span>{{ getRemaining(feeCountDown).symbolTime }}</span>
    </p>
    
    <div class="fee-rate-row" v-if="rateTips"><span style="font-weight: 700;">温馨提示：</span>{{rateTips}}</div>
  </div>

  <div class="fee">
    <div class="fee-box fz-14">
      <span>实际到账金额</span>
      <!-- exchangeInfo.actualAmount   exchangeInfo.realReceiptAmount
           exchangeInfo.currencyId   exchangeInfo.realReceiptCurrency
       -->
      <p>
        {{ $filters.formatMoney(exchangeInfo.realReceiptAmount) || 0 }}
        {{ exchangeInfo.realReceiptCurrency }}
      </p>
    </div>
  </div>

  <div v-if="withdrawPrice" class="phone-box fz-14">
    <div class="phone-box-title">绑定手机号: {{ custInfo.bindTel }}</div>
    <div class="input-box">
      <i class="iconfont icon-yanzhengmaicon"></i>
      <input v-model="smsCode" maxlength="6" placeholder="输入验证码" />
      <button
        :style="{ color: smsCountDown === 60 ? '#1677ff' : '' }"
        @click="couponSelectProcess"
        :disabled="smsCountDown !== 60"
      >
        {{ smsCountDown === 60 ? '获取验证码' : `${smsCountDown}s` }}
      </button>
    </div>
  </div>
  <button
    class="submit-btn"
    :disabled="!withdrawPrice || !smsCode"
    @click="hanldeConfirm"
  >
    立即提现
  </button>
  <p class="withdraw-tips fz-12">提现成功后，将无法退款</p>

  <!-- 选择币种框 -->
  <Popup
    v-model:show="showCoinPopup"
    position="bottom"
    round
    closeable
    @close="handleClose"
  >
    <div class="popup-title">选择提现币种</div>
    <div class="select-coin">
      <div
        v-for="(item, index) in userInfo.custBalDetails"
        v-show="item.balanceAmount"
        :key="index"
        class="coin-item"
        @click="handleSelect(item)"
      >
        <div>
          <p>
            {{ item.currencyId }}
            {{
              Utility.getLabelByValue(enumDslInfo.CurrencyType, item.currencyId)
            }}
          </p>
          <span class="fz-12">余额 {{ item.balanceAmount }}</span>
        </div>
        <i
          v-if="selectCoin.currencyId === item.currencyId"
          class="iconfont icon-duigou"
        ></i>
      </div>
    </div>
  </Popup>

  <!-- 选择优惠券 -->
  <Popup
    v-model:show="showCouponPopup"
    position="bottom"
    round
    closeable
    @close="handleClose"
  >
    <div class="popup-title">请选择优惠券</div>
    <div class="select-coupon">
      <div
        v-for="(item, index) in couponList"
        :key="index"
        class="coupon-item"
        @click="handleSelectCoupon(item, index)"
      >
        <div class="coupon-item-tips fz-12">
          {{ item.couponUseType }}
        </div>
        <label>{{ item.type }}</label>
        <div class="coupon-info">
          <div class="coupon-price">
            <p>
              {{ item.ruleShortDesc }}
            </p>
          </div>
          <div class="coupon-desc">
            <p class="fz-14">{{ item.title }}</p>
            <p class="fz-12">{{ item.useDesc }}</p>
          </div>
          <div class="coupon-right">
            <Icon
              :style="{ color: couponIndex === index ? '#005DFF' : '#ccc' }"
              :name="couponIndex === index ? 'checked' : 'circle'"
              size="0.18rem"
            />
          </div>
        </div>
        <div class="coupon-date fz-12">
          有效期: {{ item.startDate }} -
          {{ item.endDate }}
        </div>
      </div>
      <div v-if="disableCoupinList.length" class="disabled-list">
        <div class="disabled-title fz-12">
          <span></span>
          以下暂不能使用
          <span></span>
        </div>
        <div
          v-for="(item, index) in disableCoupinList"
          :key="index"
          class="coupon-item"
        >
        <div class="coupon-item-tips fz-12">
          {{ item.couponUseType }}
        </div>
        <label>{{ item.type }}</label>
        <div class="coupon-info">
          <div class="coupon-price">
            <p>
              {{ item.ruleShortDesc }}
            </p>
          </div>
          <div class="coupon-desc">
            <p class="fz-14">{{ item.title }}</p>
            <p class="fz-12">{{ item.useDesc }}</p>
          </div>
            <div class="coupon-right fz-12">
              <!-- {{ item.temporarilyUsableReason }} -->
              未到使用时间
            </div>
          </div>
          <div class="coupon-date fz-12">
            有效期: {{ item.startDate }} -
            {{ item.endDate }}
          </div>
        </div>
      </div>
    </div>
  </Popup>

  <!-- 密码控件 -->
  <div v-if="showWithdrawPwdModal">
    <sixPwdModal
      :clear="withdrawpwdClear"
      :closeModal="() => (showWithdrawPwdModal = false)"
      :isShow="showWithdrawPwdModal"
      pwdId="withdrawPwd"
      passGuard="withdrawPassguard"
      :onFinish="onwithPwdFinish"
    />
  </div>
</template>

<style scoped lang="scss">
.withdraw-price {
  padding: 0.2rem 0.12rem 0.1rem;
  margin: 0.1rem 0.12rem;
  border-radius: 0.08rem;
  background: #fff;
  .input-box {
    @include fh;
    height: 0.56rem;
    color: #222;
    input {
      height: 100%;
      font-size: 0.36rem;
      border: none;
      flex: 1;
      width: 2.5rem;
    }
    i {
      color: #ccc;
    }
  }
  .balance {
    @include fh;
    justify-content: space-between;
    height: 0.38rem;
    border-top: 1px solid #eee;
    span {
      color: #999999;
    }
    p {
      color: #3f84f3;
    }
  }
}

.bank-box {
  @include fh;
  padding: 0 0.12rem;
  margin: 0.1rem 0.12rem;
  background: #fff;
  border-radius: 0.08rem;
  height: 0.54rem;
  color: #222;
  p {
    margin-right: auto;
  }
  div {
    margin-left: 0.04rem;
    color: #3f84f3;
  }
  i {
    color: #ccc;
  }
}

.fee {
  margin: 0.1rem 0.12rem;
  padding: 0.12rem;
  background: #fff;
  border-radius: 0.08rem;
  .fee-box {
    @include fh;
    justify-content: space-between;
    padding: 0.06rem 0;
    p {
      // color: #999999;
    }
  }
  &-tips {
    @include fh;
    color: #999;
    span {
      color: #f41d1d;
    }
    p {
      text-decoration: line-through;
    }
  }
}

.fee-rate {
  background: #fff;
  padding: 0.12rem;
  margin: 0.1rem 0.12rem;
  &-title {
    @include fh;
    justify-content: space-between;
    margin-bottom: 0.1rem;
    p {
      color: #222;
    }
    span {
      color: #1677ff;
    }
  }
  &-row {
    color: #999999;
    line-height: 0.2rem;
    span {
      color: #222222;
    }
  }
}

.phone-box {
  margin: 0.1rem 0.12rem;
  padding: 0.12rem;
  background: #fff;
  &-title {
    margin-bottom: 0.1rem;
  }
  .input-box {
    @include fh;
    height: 0.48rem;
    i {
      color: #ccc;
    }
    input {
      width: 2rem;
      flex: 1;
      height: 100%;
      border: none;
      margin: 0 0.04rem;
    }
    button {
      border: none;
      background: inherit;
    }
  }
}

.submit-btn {
  display: block;
  @include wh(3.1rem, 0.48rem);
  border-radius: 0.24rem;
  margin: 0.2rem auto 0.1rem;
  border: none;
  color: #fff;
  background: #3f84f3;
}
.submit-btn:disabled {
  background: #cccccc;
}
.withdraw-tips {
  text-align: center;
  color: #999999;
  padding-bottom: 0.8rem;
}

.popup-title {
  text-align: center;
  padding: 0.14rem 0;
}
.select-coin {
  max-height: 4.5rem;
  overflow: auto;
  padding: 0.12rem;
  .coin-item {
    @include fh;
    justify-content: space-between;
    height: 0.6rem;
    border-bottom: 1px solid #eee;
    i {
      color: #3a88f7;
    }
  }
}
.select-coupon {
  background: #f7f8fa;
  max-height: 4.5rem;
  overflow: auto;
  padding: 0.12rem;
  .coupon-item {
    padding: 0.25rem 0.13rem 0;
    background: #fff9f8;
    border: 1px solid #e02020;
    width: 3.5rem;
    height: 1.2rem;
    border-radius: 0.08rem;
    margin-bottom: 0.1rem;
    display: flex;
    flex-direction: column;
    position: relative;
    &-tips {
      position: absolute;
      width: 0.96rem;
      text-align: center;
      left: 0.13rem;
      top: 0.65rem;
      color: #212121;
    }
    label {
      position: absolute;
      left: 0;
      top: 0;
      width: 0.68rem;
      height: 0.22rem;
      line-height: 0.22rem;
      text-align: center;
      background: rgba(240, 0, 0, 0.14);
      border-radius: 0.08rem 0px 0.08rem 0px;
      color: #fb0000;
      font-size: 0.1rem;
      font-weight: normal;
    }
    .coupon-info {
      display: flex;
      align-items: center;
      .coupon-price {
        width: 0.96rem;
        text-align: center;
        p {
          color: #f30000;
          font-size: 0.24rem;
          font-weight: 600;
          span {
            font-size: 0.18rem;
          }
        }
      }
      .coupon-desc {
        width: 1.5rem;
        p:nth-of-type(1) {
          font-family: PingFangSC-Medium, PingFang SC;
          color: #212121;
          margin-bottom: 0.09rem;
        }
        p:nth-of-type(2) {
          color: #999;
        }
      }
      .coupon-right {
        text-align: right;
        margin-left: auto;
        flex: 1;
        color: #999;
      }
    }
    .coupon-date {
      height: 0.27rem;
      margin-top: auto;
      color: #999;
      display: flex;
      align-items: center;
      border-top: 1px dashed #e02020;
    }
  }
}
.disabled-list {
  .disabled-title {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    margin: 0.15rem 0;
    span {
      width: 0.3rem;
      height: 1px;
      background: #ddd;
      margin: 0 0.08rem;
    }
  }
}
</style>
